<template>
	<div class="search_header">
		<div class="menu">
			<router-link v-for="item,index in searchMenu" :key="index" :to="{path: item.path}">{{item.meta.title}}</router-link>
		</div>
		<slot></slot>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['menuData']),
		searchMenu() {
			let searchMenuData = this.menuData.find(item => item.name === 'Search');
			if(!!searchMenuData && searchMenuData.isPublic === '1') {
				return !!searchMenuData.children && searchMenuData.children.length > 0 ? searchMenuData.children : [];
			} else {
				return [];
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.search_header {
	padding: 30px 0;
	background: linear-gradient(180deg, #ddeeff 0%, rgba(255, 255, 255, 0) 100%);

	.menu {
		display: flex;
		align-items: center;
		width: 720px;
		font-size: 16px;
		margin: 0 auto 12px;

		a {
			position: relative;
			line-height: 1;
			padding-bottom: 12px;
			margin-right: 16px;
			color: #303133;
			text-decoration: none;
			user-select: none;
		}

		a.router-link-active {
			font-weight: bold;
			color: var(--primary);

			&::before {
				position: absolute;
				bottom: 0;
				left: 50%;
				content: '';
				border-top: solid 7px var(--primary);
				border-left: solid 5px transparent;
				border-right: solid 5px transparent;
				transform: translateX(-50%);
			}
		}
	}
}
</style>